body, html{
    font-family: Ariel, sans-serif;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    display:inline-block;
}
.page{
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background-color: #0f95b0;
}
.panel{

    display:inline-block;
    position:relative;
}

.panel_visible{
    position:relative;

    overflow: hidden;
}
.panel_title{
    margin-top: .5em;
    margin-bottom: 1.2em;
}



.panel_content{
    padding: 20px;
    background-color: white;
    z-index:10;
    position:relative;
}
.panel_content-overlay{
    position:absolute;
    top:0;
    left:100%;
    height:100%;
}

.panel_content.animate{

    animation: movePanel 2s forwards ;
}

@keyframes movePanel{

    0%, 30%{
        transform: translateX(0%);

    }
    35%, 100%{
        transform: translateX(-100%);

    }

}
.panel_content.animateOut{

    animation: movePanelOut 2s forwards ;
}
@keyframes movePanelOut{
    0%, 30%{
        transform: translateX(-100%);

    }
    35%, 100%{
        transform: translateX(0%);

    }
}
.panel_back{
    position:absolute;
    z-index:0;
    top:50%;
    left: 0;
    width:110%;
    transform: translate(70%,-50%);
}

.panel_back.animate{

    animation: move 2s forwards ;
}

@keyframes move{
0%{
    transform: translate(70%,-50%);
    z-index:0;
}
15%{
    transform: translate(140%,-50%);
    z-index:10;
}
75%{
    transform: translate(-120%,-50%);
    z-index:10;
}
100%{
    transform: translate(-50%,-50%);
    z-index:0;
}
}
.panel_back.animateOut{
    transform: translate(-50%,-50%);
    animation: moveOut 2s forwards ;
}
@keyframes moveOut{
0%{
    transform: translate(-50%,-50%);
    z-index:0;
}
15%{
    transform: translate(-120%,-50%);
    z-index:10;
}
75%{
    transform: translate(140%,-50%);
    z-index:10;
}
100%{
    transform: translate(70%,-50%);
    z-index:0;
}



}
.panel_img{
    width:100%;
    display:block;
}

/* Form */
.form{
    box-sizing:border-box;
}
.form_label{
    display:block;
    color: #3D3D3D;
    font-weight: 600;
    margin-bottom: 5px;
}
.form_input{
    border-radius: 3px;
    background-color: #f2f2f2 ;
    box-shadow: 0px 2px 2px #D6D6D6;
    border:none;
    padding: 2%;
    margin-bottom: 15px;
    width: 250px;
    box-sizing:border-box;
    position:relative;
}
.form_input:focus{
    box-shadow: none;
    outline-color: #0f95b0;
}

.form_input::after{
    /*   TODO: make this after portion work */
    content: "👁️";
    position:absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    background-color: red;
}
.form_btn{
    margin-top: 1.2em;
    margin-bottom: 2em;
    display:block;
    width:100%;
    background-color: #0f95b0;
    color: white;
    border:none;
    padding: .6em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.1em;
    border-radius: 3px;
    cursor: pointer;
}

.form_toggle{
    background-color: transparent;
    border: none;
    padding: 0;
    margin:0;
    font-size: 1.1em;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
.form_toggle:hover{
    border-bottom: 1px solid #0f95b0;
}
.form_toggle:focus{
    outline: none;
    border-bottom: 1px solid #0f95b0;
}